<template>
	<view class="customer">
		<view class="headtop">
			<view class="headtitile">
				<image src="../../../static/images/left.png" @click="fanhui"></image>
				<text>AI客户</text>
				<view @click="refresh">刷新</view>
			</view>
		</view>
		<view class="body" v-if="list.length">
			<view class="list" v-for="(item,index) in list" :key="index" @click="detail(index)">
				<view class="top clearfix">
					<view class="left fl">{{item.name}}</view>
					<view class="right fr" @click.stop="del(index)">删除</view>
				</view>
				<view class="center clearfix">
					<view class="left fl">
						<text>获取客户：</text><text>{{item.customerCounts}}</text>
					</view>
					<view class="zhong fl">
						<text>开发客户：</text><text>{{item.clueCount}}</text>
					</view>
					<view class="right fl">
						<text>状态：</text>
						<text class="jiazai" v-if="item.status == 0">加载中</text>
						<text class="wancheng" v-else>已完成</text>
					</view>
				</view>
				<view class="bottom clearfix">
					<view class="time fl">{{item.createtime}}</view>
					<view class="gengxin fr" @click.stop="updatekaifacustomer(index,item)" v-if="item.clueCount != item.customerCounts">更新数据</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<image src="../../../static/images/empty.png" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';
	
	export default{
		data(){
			return{
				userData: [],
				pageNo: 1,
				list: [],
			}
		},
		onShow() {
			this.pageNo = 1;
			this.list = [];
			
			// 用户基本信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data;
			
				this.getList();
			}).catch((error) => {});
		},
		onReachBottom() {
			this.pageNo++;
			this.getList()
		},
		methods: {
			getList(){
				let that = this;
				
				request({
					url: '/api/usergroupbuy/api_business_info',
					method: 'POST',
					data: {
						user_id: that.userData.id,
						team_id: that.userData.team_id,
						pageNo: that.pageNo,
					},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					if(response.data.list){
						let list = response.data.list;
						
						that.list.push(...list)
					}
				})
			},
			updatekaifacustomer(index,item) {
				let that = this;
			
				uni.showModal({
					title: '提示', // 对话框标题
					content: '您确认更新开发么？', // 显示的内容
					showCancel: true, // 是否显示取消按钮
					success: function(res) {
						if (res.confirm) {
							request({
								url: '/api/usergroupbuy/api_comment_add',
								method: 'POST',
								data: {
									user_id: that.userData.id,
									team_id: that.userData.team_id,
									businessId: that.list[index].business_id,
									business_info: item,
								},
								header: {
									'xx-token': uni.getStorageSync('token')
								}
							}).then((response) => {
								uni.showToast({
									title: response.msg,
									icon: 'none'
								})
								
								setTimeout(function() {
									that.pageNo = 1;
									that.list = [];
									
									that.getList();
								}, 2000);
							}).catch((error) => {});
						}
					},
				})
			},
			del(index){
				let that = this;
				let businessId = this.list[index].business_id;
				
				uni.showModal({
					title: '提示', // 对话框标题
					content: '您确认删除么？', // 显示的内容
					showCancel: true, // 是否显示取消按钮
					success: function(res) {
						if (res.confirm) {
							request({
								url: '/api/usergroupbuy/api_comment_delete',
								method: 'POST',
								data: {
									user_id: that.userData.id,
									team_id: that.userData.team_id,
									businessId: businessId,
								},
								header: {
									'xx-token': uni.getStorageSync('token')
								}
							}).then((response) => {
								uni.showToast({
									title: response.msg,
									icon: 'none'
								})
								
								setTimeout(function() {
									that.pageNo = 1;
									that.list = [];
									
									that.getList();
								}, 2000);
							})
						} else if (res.cancel) {
							
						}
					}
				});
			},
			refresh(){
				this.list = [];
				this.pageNo = 1;
				
				this.getList()
			},
			fanhui(){
				uni.navigateBack()
			},
			detail(index){
				let businessId = this.list[index].business_id;
				
				uni.navigateTo({
					url: '/pages/home/second/customer_detail?businessId=' + businessId
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.customer {
		width: 100%;
		margin: 0 auto;

		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 166rpx;
			z-index: 200;
		
			.headtitile {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 60rpx;
				left: 3%;
				height: 96rpx;
				line-height: 96rpx;
		
				image {
					width: 20rpx;
					height: 36rpx;
					float: left;
					margin-right: 18rpx;
					margin-top: 28rpx;
				}
		
				text {
					font-size: 32rpx;
					color: #FFFFFF;
					float: left;
					height: 96rpx;
					line-height: 96rpx;
				}
		
				view {
					font-size: 30rpx;
					color: #ECDEA4;
					float: right;
					height: 96rpx;
					line-height: 96rpx;
				}
			}
		}
		
		.body{
			width: 94%;
			margin: 0 auto 20rpx;
			position: relative;
			z-index: 210;
			
			.list{
				width: 100%;
				margin: 0 auto 20rpx;
				background: #242831;
				box-sizing: border-box;
				border-radius: 20rpx;
				position: relative;
				padding: 20rpx;
				
				.top{
					width: 100%;
					margin: 0 auto;
					box-sizing: border-box;
					
					.left{
						font-size: 30rpx;
						color: #FFFFFF;
						width: 80%;
						white-space: nowrap; /* 设置文本不换行 */
						overflow: hidden; /* 隐藏溢出的内容 */
						text-overflow: ellipsis; /* 将溢出的文本显示为省略号 */
					}
					
					.right{
						width: 10%;
						font-size: 30rpx;
						color: #EB1313;
						text-align: right;
					}
				}
				
				.center{
					width: 100%;
					margin: 0 auto;
					margin-top: 30rpx;
					height: 76rpx;
					line-height: 76rpx;
					background: #1C1E22;
					border-radius: 10rpx;
					border: 1rpx solid #454B57;
					
					.left{
						width: 33.3%;
						text-align: center;
						
						text{
							font-size: 26rpx;
							color: #FFFFFF;
						}
						
						text:nth-of-type(2){
							color: #2AFF00;
							font-weight: 700;
							font-size: 30rpx;
						}
					}
					
					.zhong{
						width: 33.3%;
						text-align: center;
						
						text{
							font-size: 26rpx;
							color: #FFFFFF;
						}
						
						text:nth-of-type(2){
							color: #0088FF;
							font-weight: 700;
							font-size: 30rpx;
						}
					}
					
					.right{
						width: 33.3%;
						text-align: center;
						
						text{
							font-size: 26rpx;
							color: #FFFFFF;
						}
						
						text.jiazai{
							color: #FFA200;
						}
						
						text.wancheng{
							color: #00FFF6;
						}
					}
				}
				
				.bottom{
					width: 100%;
					margin: 0 auto;
					margin-top: 22rpx;
					
					.time{
						color: #787B8F;
						font-size: 24rpx;
						height: 60rpx;
						line-height: 60rpx;
					}
					
					.gengxin{
						width: 160rpx;
						height: 60rpx;
						border-radius: 10rpx;
						background: linear-gradient(270deg, #EAC59F, #E4B985, #FFF9CE);
						font-size: 24rpx;
						color: #806B1A;
						line-height: 60rpx;
						text-align: center;
					}
				}
			}
		}
		
		.empty{
			width: 94%;
			margin: 300rpx auto;
			text-align: center;
			
			image{
				width: 300rpx;
			}
		}
	}
</style>